import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input } from 'antd'
// 修复图标导入
import imgLogo from '@/common/images/logo2.png'

import { UserOutlined, LockOutlined, KeyOutlined } from '@ant-design/icons' // 添加缺失的UserOutlined
import './register.styl'

export default function Register() {
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

  const onFinish = async (values) => {
    setLoading(true)
    try {
      // 模拟注册请求
      message.success('注册成功！')
      navigate('/login') // 注册成功后跳转登录页
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="P-register">
      <img src={imgLogo} alt="" className="logo" />
      <div className="register-card">
        <div className="ipt-con">
        
        <Form onFinish={onFinish}>
          {/* 使用已导入的UserOutlined */}
          <Form.Item name="username" rules={[{ required: true }]}>
            <Input prefix={<UserOutlined />} placeholder="用户名" />
          </Form.Item>
          
          <Form.Item name="password" rules={[{ required: true }]}>
            <Input.Password prefix={<LockOutlined />} placeholder="密码" />
          </Form.Item>
          
          <Form.Item name="inviteCode" rules={[{ required: true }]}>
            <Input prefix={<KeyOutlined />} placeholder="邀请码" />
          </Form.Item>
          
          <Button 
            type="primary" 
            htmlType="submit" 
            loading={loading}
            block
          >
            立即注册
          </Button>
          
          <div className="action-links">
            <Button type="link" onClick={() => navigate('/login')}>
              已有账号？立即登录
            </Button>
          </div>
        </Form>
      </div>
    </div>
  </div>
  )
}